<template>

  <card-component
    :content-title="contentTitle"
    :page="page"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange">

    <div slot="action">
            <stencilFilter @search="handleSearch" :remaining="filterRemaining" :retired="filterRetired" :usedCount="filterUsedCount" :inventory="filterInventory"></stencilFilter>
      <!--      <el-button type="primary" size="small" style="margin: 10px" @click="handleAddScanner">新增</el-button>-->
    </div>


    <table-component slot="table"
                     :table-header="tableHeader"
                     :table-data="tableData"
                     :page="page"
                     @handleChange="handleTableDataChange"></table-component>


  </card-component>

</template>

<script>

  import card from '@/base/card.vue'
  import table from '@/base/AutoWidthTable.vue'
  import action from '@/base/action.vue'
  import request from '@/common/js/request'
  import stencilFilter from '@/base/stencilFilter.vue'

  import util from '@/common/js/util'

  export default {
    components: {
      'card-component': card,
      'table-component': table,
      'action-componet': action,
      stencilFilter
    },
    data() {
      return {
        contentTitle: this.$getTextByLangKey("钢网管理"),
        tableHeader: [],
        tableData: [],
        page: {
          currentPage: 1,
          total: 0,
          pageSize: 20,
        },
        filterParams:{

        },

        filterUsedCount:'',
        filterRetired:'',
        filterRemaining:'',
        filterInventory:'',
        timer: null,
        isRequesting: false,

      }
    },
    created: function () {
      this.fetchListData()
    },

    watch: {

    },

    methods: {

      makeHeader(headers){
        // let actionItem = {type: "action", label: this.$getTextByLangKey('操作'), isShow: true,width:'200px'}
        const newHeaders = headers?headers.map(x=>{
          x.isShow = true

          if(x.prop === "tension"){
            x.type = 'dotNumber'
          }
          if(x.prop === "printCount"){
            x.type = 'number'
          }
          if(x.prop === "retired"){
            x.type = 'select'
            x.valueList = [{label:'是',value:true},{label:'否',value:false},]
          }

          return x
        }):[]

        return newHeaders
      },

      makeList(list){
        const newList = list?list.map(x=>{
          x.checkInTime = x.checkInTime?new Date(x.checkInTime).format("yyyy/MM/dd hh:mm"):''
          x.usedTime = x.usedTime?new Date(x.usedTime).format("yyyy/MM/dd hh:mm"):''
          x.checkOutTime = x.checkOutTime?new Date(x.checkOutTime).format("yyyy/MM/dd hh:mm"):''
          // x.retired = x.retired?'是':'否'
          return x
        }):[]
        return newList
      },

      handleTableDataChange(key,index, row){
        request.requestUpdateStencil({
          'id':row.id,
          [key]:row[key],
        },res=>{
          util.showSuccessToast( this.$getTextByLangKey("修改成功"))
        },err=>{
          util.showErrorToast(err.data.message||'修改失败')

        })
      },

      handleSizeChange: function (val) {
        this.$emit("handleSizeChange", val)
      },
      handleCurrentChange: function (val) {
        this.page.currentPage = val
        this.fetchListData()
      },

      handleSearch(params){
        this.filterParams = params
        this.fetchListData()
      },


      fetchListData: function () {
        request.requestStencilList({page:this.page.currentPage,size:this.page.pageSize,...this.filterParams},res=>{
          if(res.data.code === 200){
            const data = res.data.data
            this.tableHeader = this.makeHeader(data.headers)
            this.tableData = this.makeList(data.data.list)
            this.page.total = data.data.total
            this.page.currentPage = data.data.pageNum

            this.filterUsedCount = ''
            this.filterRetired = ''
            this.filterRemaining = ''
            this.filterInventory = ''
            if(data.summary&&data.summary.length>0){
              const findUsedCountItem = data.summary.find(item=>{
                return item.prop === 'usedCount'
              })
              if(findUsedCountItem){
                this.filterUsedCount = findUsedCountItem.value
              }

              const findRetiredItem = data.summary.find(item=>{
                return item.prop === 'retired'
              })
              if(findRetiredItem){
                this.filterRetired = findRetiredItem.value
              }
              const findRemainingItem = data.summary.find(item=>{
                return item.prop === 'remaining'
              })
              if(findRemainingItem){
                this.filterRemaining = findRemainingItem.value
              }

              const filterInventoryItem = data.summary.find(item=>{
                return item.prop === 'inventory'
              })
              if(filterInventoryItem){
                this.filterInventory = filterInventoryItem.value
              }
            }
          }
        },res=>{
        })


      },

    },


  }
</script>


<style scoped>
  .el-card {
    box-shadow: 0 0;
    border-radius: 0;
    border: none;
  }
</style>


